<template>
	<div class="services">
		<div class="menberConTitle flex" style="justify-content: space-between;">
			<div class="tableTitle">服务队伍列表</div>
			<!-- <div> -->
			<el-button round size="mini" type="primary" @click="addTeams">新增队伍</el-button>
			<!-- </div> -->
		</div>
		<!-- <el-cascader
		    v-model="value"
		    :options="options"></el-cascader> -->
		<el-table :data="pageData.items" highlight-current-row ref="singleTable" style="width: 100%;" @row-click="rowClick">
			<el-table-column prop="serviceName" label="队伍名称"></el-table-column>
			<el-table-column prop="serviceTeamCount" label="人数"></el-table-column>
			<el-table-column prop="directorName" label="部门主管">
				<template slot-scope="scope">
					{{ scope.row.directorName?scope.row.directorName:'暂无主管' }}
				</template>
			</el-table-column>
			<el-table-column prop="serviceAddress" label="服务区域"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size=" " class="isdelate" @click="deleteRow(scope.row)">删除</el-button>
					<el-button type="text" size=" " @click="updateRow(scope.row)">修改</el-button>
					<el-button type="text" size=" " @click="toTopRow(scope.row)">置顶</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		<!-- 新增队伍 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
			<div v-show="!dialogData.isNext">
				<el-form label-width="9rem" :model="dialogData">
				  <el-form-item label="服务队名称">
				    <el-input v-model="dialogData.serviceTeamName" placeholder="请输入服务队名称"></el-input>
				  </el-form-item>
				  <el-form-item label="服务地址">
				    <address-Cascader :value="[]" :checkStrictly="true" ref="CascaderKey" placeholder="请选择服务队地址" @getAddressData="getAddressData"></address-Cascader>
				  </el-form-item>
				</el-form>
			</div>
			<div v-show="dialogData.isNext">
				<el-table
				    ref="multipleTable"
				    :data="dialogTableData.items"
				    tooltip-effect="dark"
				    style="width: 100%"
					@select="rowSelect"
				    @selection-change="handleSelectionChange">
				    <el-table-column type="selection" width="55"> </el-table-column>
				    <el-table-column prop="name" label="姓名" ></el-table-column>
					<el-table-column prop="phone" label="电话" ></el-table-column>
					<el-table-column prop="mainCompanyName" label="主团队" ></el-table-column>
					<el-table-column prop="departmentName" label="部门" ></el-table-column>
					<el-table-column prop="dutiesName" label="职务" ></el-table-column>
					<el-table-column prop="address" label="主管">
						<template slot-scope="scope">
							<el-button type="text" size=" " v-if="scope.row.userId == dialogData.director" @click="setAdmins('')">取消主管</el-button>
							<el-button type="text" size=" " v-else :disabled="dialogData.director?true:false" @click="setAdmins(scope.row)">设为主管</el-button>
						</template>
					</el-table-column>
				  </el-table>
				  <pagina-tion :totalNum="dialogTableData.totalNum" @paginaClick="dialogTableDataPaginaClick"></pagina-tion>
			</div>
			<span slot="footer" class="dialog-footer" v-show="!dialogData.isNext">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="dialognext">下一步</el-button>
			</span>
			<span slot="footer" class="dialog-footer" v-show="dialogData.isNext">
				<el-button @click="dialoglast">返回上一步</el-button>
				<el-button type="primary" @click="confirmAdd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageData: '',
				queryData: {
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				// 新增队伍
				dialogVisible: false,
				dialogTitle: '填写信息',
				dialogData: {
					companyId: '',
					isNext: false,
					serviceTeamName: '', // 服务队名称
					serviceAddress: '', // 服务地址
					serviceAddressId: '', // 服务地址 id
					user: [] ,// userId=服务队成员id,director=服务队主管id：0不是，1是
					director: ''
				},
				dialogTableData: [],
				dialogQueryData: {
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				dialogSelectData: new Map() // 记录表格已选择的数据
			}
		},
		mounted() {
			this.dialogQueryData.companyId = this.dialogData.companyId = this.queryData.companyId = this.$store.state.company.selectCompanyId ? this.$store.state.company.selectCompanyId :
				this.$store.state.company.companyId
				// console.log(this.$store.state.company.selectCompanyId)
				// console.log(this.$store.state.company.companyId)
			// this.options = $addressListData
			this.getPageData()
		},
		watch:{
			dialogVisible(newData){
				if(!newData){
					this.dialogSelectData.clear()
					this.dialogTableData = []
					this.dialogData.isNext = false
					this.dialogData.director = ''
					this.dialogData.serviceAddress = ''
					this.dialogData.serviceAddressId = ''
					this.dialogData.user = []
					this.dialogData.serviceTeamName = ''
					this.$refs.CascaderKey.values = []
				}
			}
		},
		methods: {
			getPageData() {
				this.$request.get(this.$api.queryServiceTeamList, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						// this.pageData.items.sort((a, b)=>{
						// 	return b.top - a.top
						// })
						this.rowClick(this.pageData.items[0])
					}
				})
			},
			paginaClick(val) {
				this.queryData.page = val
				this.getPageData()
			},
			rowClick(row) {
				// 当鼠标点击某一行时
				// console.log(row)
				if(row){
					this.$refs.singleTable.setCurrentRow(row);
					this.$parent.$refs.serviceConfig.$data.serviceTeamId = row.id
					this.$parent.$refs.serviceConfig.getPageData()
				}
				
				// console.log(this.$parent.$refs.serviceConfig.getPageData())
			},
			updateRow(row){
				// 修改
				this.$router.push(`/industrialist/working/updateservice/${row.id}`)
			},
			toTopRow(row) {
				// 置顶
				this.$request.get(this.$api.ServiceTeamListTop, {
					serviceTeamId: row.id,
					topType: '1'
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('操作成功')
						// this.queryData.page = 1
						this.getPageData()
					}
				})
			},
			deleteRow(row) {
				// 删除
				this.$confirm('确认删除该队伍?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.get(this.$api.removeServiceTeam, {
						serviceTeamId: row.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							if (this.queryData.page > 1) {
								this.queryData.page = Math.ceil((this.pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.getPageData()
						}
					})
				})
			},
			getAddressData(obj) {
				this.dialogData.serviceAddress = obj.text
				this.dialogData.serviceAddressId = obj.key
				console.log(obj)
			},
			addTeams() {
				// 新增
				this.dialogVisible = true
			},
			dialognext() {
				// 下一步
				// this.dialogData.isNext = true
				if(!this.dialogData.serviceTeamName){
					this.$message.error('服务队名称不能为空')
					return
				}
				if(!this.dialogData.serviceAddress){
					this.$message.error('服务队地址不能为空')
					return
				}
				this.dialogTitle = '选择成员'
				this.$set(this.dialogData, 'isNext', true)
				// console.log(this.dialogSelectData)
				this.getMenbers()
			},
			dialoglast() {
				// 上一步
				this.dialogTitle = '填写信息'
				this.dialogData.isNext = false
			},
			handleSelectionChange(e){
				// 表格选中数据
				// if (e.length > 0) {
					e.forEach((v)=>{
						this.dialogSelectData.set(v.userId, v)
					})
				// } else{
				// 	this.dialogSelectData.clear()
				// }
			},
			rowSelect(selection, row){
				// 单选某一行时的函数
				if (this.dialogSelectData.has(row.userId)){
					this.dialogSelectData.delete(row.userId)
				} else {
					this.dialogSelectData.set(row.userId, row)
				}
				console.log(this.dialogSelectData)
			},
			dialogTableDataPaginaClick(val){
				this.dialogQueryData.page = val
				this.getMenbers()
			},
			getMenbers(){
				this.$request.postForm(this.$api.getUsersByCompanyId, this.dialogQueryData).then(res=>{
					if(res.code == 200){
						this.dialogTableData = res.data
						this.dialogTableData.items.forEach((v, i)=>{
							v.isAdmin = false
							v.director = 0
						})
						setTimeout(()=>{
							this.selectTables()
						}, 100)
						// this.selectTables()
					}
				})
			},
			setAdmins(row){
				// 设为主管
				if (row) {
					if (this.dialogSelectData.has(row.userId)) {
						this.dialogData.director = row.userId
						this.dialogTableData.items.forEach((v, i)=>{
							if(v.userId === row.userId){
								v.isAdmin = true
								v.director = 1
							} else {
								v.isAdmin = false
								v.director = 0
							}
						})
						this.$forceUpdate()
					} else{
						this.$message.error('需要选择该成员才能设置为主管')
					}
				} else{
					this.dialogData.director = ''
					this.dialogTableData.items.forEach((v, i)=>{
							v.isAdmin = false
							v.director = 0
					})
				}
				
			},
			selectTables(){
				// 初始化表格选中状态
				this.dialogTableData.items.forEach((v, i)=>{
					if(this.dialogSelectData.has(v.userId)){
						console.log(v)
						this.$refs.multipleTable.toggleRowSelection(v)
					}
				})
				this.$forceUpdate()
			},
			confirmAdd(){
				// 确定添加服务队
				if(this.dialogSelectData.size < 1){
					this.$message.error('请选择服务队成员')
					return
				}
				let isadmin = false
				this.dialogSelectData.forEach(v=>{
					if(v.director === 1){
						isadmin = true
					}
					let users = {
						userId: v.userId,
						director: v.director
					}
					this.dialogData.user.push(JSON.stringify(users))
				})
				if(!isadmin){
					this.$message.error('请设置服务队主管')
					return
				}
				this.dialogData.user = this.dialogData.user.join(',')
				this.$request.get(this.$api.saveServiceTeam, this.dialogData).then(res=>{
					if(res.code == 200){
						this.$message.success('添加成功')
						this.getPageData()
						this.dialogVisible = false
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.services>>>.isdelate {
		color: #F42929;
	}
</style>
